<!-- ./idFieldRender.vue 文件 -->
<template>
    <div>
        <!-- 自定义 -->
        <!-- <FormItem :input-attr="{onSuccess: uploadFileSuccess}" type="file" v-model="state.file" /> -->
        <FormItem type="file" :id="'up-' + props.renderRow.id" v-model="state.file" style="display: none;" :input-attr="{onSuccess: uploadInvoice, showFileList: false}" />
        <el-button v-if="!state.value" class="" size="small" v-blur @click="clickUpload">{{ t('上传') }}</el-button>

        <a v-if="state.value" :href="state.value.url" target="_blank" style="font-size: 13px; text-decoration: none; color: #333;">{{ state.value.name }}</a>

        <el-popconfirm v-if="state.value" :title="t('确定要删除这个文件吗') + '?'" @confirm="delOrderImage()">
            <template #reference>
                <Icon name="el-icon-Close" color="#bd362f" size="18" style="cursor: pointer; position: relative; top: 6px; left: 5px; display: inline;" />
            </template>
        </el-popconfirm>
        
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx, ElInput } from 'element-plus'
import { reactive, ref, nextTick } from 'vue';
import { uploadInvoiceApi, delInvoiceApi } from '/@/api/most/finance/account'
import { ElNotification } from 'element-plus'
import FormItem from '/@/components/formItem/index.vue'

import { useI18n } from 'vue-i18n'

const { t } = useI18n();

// 自定义

const inputRef = ref()

const buttonRef = ref();
const popoverRef = ref();

// BuildAdmin将自动为此组件传递五个Props
interface Props {
    renderValue: any // 单元格值
    renderRow: TableRow // 当前行数据
    renderField: TableColumn // 当前列数据
    renderColumn: TableColumnCtx<TableRow> // 当前列上下文数据
    renderIndex: number // 当前行号
}
const props = defineProps<Props>()

const state = reactive({
    value: props.renderValue,
    file: ''
})

const delOrderImage = () => {
    delInvoiceApi({id: props.renderRow.id}).then((e) => {
        state.value = false;
    })
}

const clickUpload = () => {
    const targetButton = document.querySelector('#up-' + props.renderRow.id + ' .el-upload');
    const clickEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
    });
    
    // 触发目标按钮的点击事件
    targetButton.dispatchEvent(clickEvent);
}

const uploadInvoice = () => {
    console.log(state.file)
    let data = {
        file: state.file,
        id: props.renderRow.id
    }
    uploadInvoiceApi(data).then((e) => {
        state.value = e.data;
    })
}


</script>

<style scoped lang="scss">
// 自定义
.pointer{
    cursor: pointer;
    user-select: none;
}
.pointer:hover{
    color: #409eff!important;
}
.agency-fee-input{
    width: 150px;
}
</style>